$sphinx_full_width: 1600px;
$sphinx_medium_width: 1101px;
$sphinx_full_width_content_width: 700px;

$sphinx_left_menu_wrapper_padding_right: 13.5%;
$sphinx_left_menu_width: 25%;
$sphinx_left_menu_scroll_wrapper_width: 120%;

$sphinx_content_wrap_width: 71%;
$sphinx_content_wrap_left_margin: 26.4%;

$sphinx_article_width: 75%;

$sphinx_right_menu_wrap_left_margin: 2%;
$sphinx_right_menu_left_margin: 81.5%;
$sphinx_right_menu_scroll_wrapper_width: 120%;

$sphinx_page_bar_left_margin: 25%;
$sphinx_page_bar_left_padding: 2%;

$sphinx_shortcuts_left_margin: 78%;

@mixin sphinx-full-size {
  @media screen and (min-width: $sphinx_full_width) { @content; }
}

@mixin sphinx-medium-size {
  @media screen and (min-width: $sphinx_medium_width) { @content; }
}

@mixin format-code($background, $pad: true) {
  border-top: solid 2px $background;
  background-color: $background;
  border-bottom: solid 2px $background;
  @if $pad {
    padding: 0px 3px;  // the containing `code` does proper spacing
    .pre {
      outline: 0px;
      padding: 0px;  // remove extra spacing on children
    }
  }
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html {
  height: 100%;
  @include desktop {
    font-size: 16px;
  }
}

body {
  background: $white;
  height: 100%;
  margin: 0;
  &.no-scroll {
    height: 100%;
    overflow: hidden;
  }
}

p {
  margin-top: 0;
  margin-bottom: rem(18px);
  @include default_link_styles;
  a:link,
  a:visited,
  a:hover {
    color: $red_orange;
  }
}

.wy-breadcrumbs li a {
  color: $red_orange;
}

ul.pytorch-breadcrumbs {
  padding-left: 0;
  list-style-type: none;

  li {
    display: inline-block;
    font-size: rem(14px);
  }

  a {
    color: $red_orange;
    text-decoration: none;
  }
}

.table-of-contents-link-wrapper {
  display: block;
  margin-top: 0;
  padding: rem(20px) rem(30px);
  background-color: $light_grey;
  position: relative;
  color: $slate;
  font-size: rem(20px);

  &.is-open {
    .toggle-table-of-contents {
      transform: rotate(180deg);
    }
  }

  @include full-nav-menu-desktop {
    display: none;
  }
}

.toggle-table-of-contents {
  background-image: url("../images/chevron-down-grey.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  height: 100%;
  position: absolute;
  right: 21px;
  width: 30px;
  top: 0;
}

.tutorials-header {
  .header-logo {
    background-image: url("../images/logo-dark.svg");
  }

  .main-menu ul li a {
    color: $not_quite_black;
  }

  .main-menu-open-button {
    background-image: url("../images/icon-menu-dots-dark.svg");
  }
}

.rst-content footer {

  .rating-hr.hr-top {
    margin-bottom: rem(-1px);
  }

  .rating-hr.hr-bottom {
    margin-top: rem(-1px);
  }

  .rating-container {
    display: inline-flex;
    font-size: rem(18px);

    .rating-prompt, .was-helpful-thank-you {
      padding: rem(10px) rem(20px) rem(10px) rem(20px);
    }

    .was-helpful-thank-you {
      display: none;
    }

    .rating-prompt.yes-link, .rating-prompt.no-link {
      color: $orange;
      cursor: pointer;

      &:hover {
        background-color: $orange;
        color: $white;
      }
    }

    .stars-outer {
      display: inline-block;
      position: relative;
      font-family: FontAwesome;
      padding: rem(10px) rem(20px) rem(10px) rem(20px);

      i {
        cursor: pointer;
      }

      .star-fill {
         color: $red_orange;
      }
    }
  }

  div[role="contentinfo"] {
    padding-top: rem(40px);
    p {
      margin-bottom: 0;
    }
  }
}

h1 {
  font-size: rem(32px);
  letter-spacing: 1.78px;
  line-height: rem(40px);
  text-transform: uppercase;
  margin: rem(22px) 0;
}

span.pre {
  color: $content_text_color;
  background-color: $light_grey;
  padding: 2px 0px;
}

pre {
  padding: rem(22px);
}

.highlight .c1 {
  color: $quick_start_grey;
}

.headerlink {
  display: none !important;
}

a:link,
a:hover,
a:visited {
  &.has-code {
    color: $code_link_color;
    span {
      color: $code_link_color;
    }
  }
}

article.pytorch-article {
  ul,
  ol {
    padding-left: rem(30px);
    margin: 0;

    li {
      margin: 0;
      line-height: rem(28px);
    }
    p {
      line-height: rem(28px);
      margin-bottom: 0;
    }

    ul,
    ol {
      margin: 0;
    }
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: normal;
    a {
      color: $not_quite_black;
    }
  }
  p.caption {
    margin-top: rem(20px);
  }
}

article.pytorch-article .section:first-of-type h1:first-of-type {
  margin-top: 0;
}

article.pytorch-article .sphx-glr-thumbcontainer {
  margin: 0;
  border: 1px solid #d6d7d8 ;
  border-radius: 0;
  width: 45%;
  text-align: center;
  margin-bottom: 5%;

  @media screen and (max-width: $sphinx_medium_width - 1px) {
    &:nth-child(odd) {
      margin-left: 0;
      margin-right: 2.5%;
    }

    &:nth-child(even) {
      margin-right: 0;
      margin-left: 2.5%;
    }

    .figure {
      width: 40%;
    }
  }

  @include sphinx-medium-size {
    margin-right: 3%;
    margin-bottom: 3%;
    width: 30%;
  }

  .caption-text {
    a {
      font-size: rem(16px);
      color: $not_quite_black;
      letter-spacing: 0;
      line-height: rem(24px);
      text-decoration: none;
    }
  }

  &:hover {
    .figure:before {
      bottom: 100%;
    }

    box-shadow: none;
    border-bottom-color: $white;
  }

  .figure {
    width: 80%;
  }

  .figure:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 35%;
    left: 0;
    right: 0;
    background: #8A94B3;
    opacity: 0.10;
  }

  .figure a.reference.internal {
    text-align: left;
  }

  @include animated_border_hover_state;
  @include desktop {
    &:after {
      background-color: $red_orange;
    }
  }
}

article.pytorch-article {
  .section {
    :not(dt) > code {
      color: $not_quite_black;
      @include format-code($white);
    }
  }

  .function {
    dt {
      position: relative;
      background: $light_grey;
      padding: rem(8px);
      border-left: 3px solid $red_orange;
      word-wrap: break-word;
      padding-right: 100px;

      em.property {
        font-family: inherit;
      }

      em, .sig-paren {
        @include code_font_family;
        font-size: 87.5%;
      }

      a {
        right: 30px;
        padding-right: 0;
        top: 50%;
        transform: perspective(1px) translateY(-50%);
      }
      &:hover {
        .viewcode-link {
          color: $red_orange;
        }
      }
    }
    .anchorjs-link {
      display: inline;
      position: absolute;
      right: 8px;
      font-size: rem(25px) !important;
      padding-left: 0;
    }

    dt > code {
      color: $not_quite_black;
      @include format-code($light_grey, false);
    }

    .viewcode-link {
      padding-left: rem(10px);
      position: absolute;
      font-size: rem(14px);
      color: #979797;
      letter-spacing: 0;
      line-height: rem(24px);
      text-transform: uppercase;
    }
    dd {
      padding-left: rem(60px);
      p {
        color: $not_quite_black;
      }
    }
    table {
      tbody {
        tr {
          th.field-name {
            white-space: nowrap;
            color: $not_quite_black;
            width: 20%;
            @include desktop {
              width: 15%;
            }
          }
          td.field-body {
            padding: 0.625rem;
            width: 80%;
            @include desktop {
              width: 85%;
            }
            @include sphinx-full-size {
              padding-left: rem(20px);
            }
            color: $not_quite_black;
            p {
              padding-left: 0px;
              &:last-of-type {
                margin-bottom: 0;
              }
            }
            ol, ul {
              padding-left: rem(16px);
              padding-bottom: 0;
            }
          }
        }
      }
    }

    table.docutils.field-list {
      margin-bottom: rem(12px);
    }
  }
  .attribute {
    @extend .function;
    .has-code {
      float: none;
    }
  }

  .class {
    @extend .function;
    dt {
      border-left: none;
      border-top: 3px solid $red_orange;
      padding-left: 4em;
      em.property {
        position: absolute;
        left: 0.5rem;
      }
    }

    dd {
      .docutils {
        dt {
          padding-left: 0.5rem;
        }
      }
    }

    em.property {
      text-transform: uppercase;
      font-style: normal;
      color: $red_orange;
      font-size: rem(16px);
      letter-spacing: 0;
      padding-right: rem(12px);
    }

    dl dt em.property {
      position: static;
      left: 0;
      padding-right: 0;
    }

    .method,
    .staticmethod {
      dt {
        border-left: 3px solid $red_orange;
        border-top: none;
      }
      dt {
        padding-left: 0.5rem;
      }
    }
    .attribute {
      @extend .attribute;
      dt {
        border-top: none;
        em.property {
          position: relative;
          left: 0;
        }
      }
    }
  }

  table {
    table-layout: fixed;
  }
}

// Below defines css styles for admonitions, i.e., notes, warnings, etc.  Some
// of these, e.g., formatting for <code/>, is supposed to over write the ones
// defined above for entire sections, e.g, .function and .class.  So this is
// placed later in this file, for higher precedence when both rules have same
// specificities.
article.pytorch-article {
  .note,
  .warning,
  .tip,
  .seealso,
  .hint,
  .important,
  .caution,
  .danger,
  .attention,
  .error {
    background: $light_grey;
    margin-top: rem(30px);
    margin-bottom: rem(18px);
    padding-bottom: 1px; // needed for nested directives (code inside note)

    .admonition-title {
      color: $white;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: rem(18px);
      padding: 3px 0 3px rem(22px);
      position: relative;
      font-size: rem(14px);
      &:before {
        content: "\2022";
        position: absolute;
        left: 9px;
        color: $white;
        top: 2px;
      }
    }
    p:nth-child(n + 2) {
      padding: 0 rem(22px);
    }
    table {
      margin: 0 rem(32px);
      width: auto;
    }

    :not(dt) > code {
      @include format-code($white);
      outline: 1px solid #e9e9e9;
    }

    pre {
      margin-bottom: 0;
    }

    .highlight {
      margin: 0 rem(32px) rem(18px) rem(32px);
    }

    ul,
    ol {
      padding-left: rem(52px);
      li {
        color: $not_quite_black;
      }
    }

    p {
      margin-top: rem(18px);
    }
  }

  .note .admonition-title {
    background: #54c7ec;
  }

  .warning .admonition-title {
    background: #e94f3b;
  }

  .tip .admonition-title {
    background: #6bcebb;
  }

  .seealso .admonition-title {
      background: #6bcebb;
  }

  .hint .admonition-title {
    background: #a2cdde;
  }

  .important .admonition-title {
    background: #5890ff;
  }

  .caution .admonition-title {
    background: #f7923a;
  }

  .danger .admonition-title {
    background: #db2c49;
  }

  .attention .admonition-title {
    background: #f5a623;
  }

  .error .admonition-title {
    background: #cc2f90;
  }

  .sphx-glr-download-link-note.admonition.note,
  .reference.download.internal, .sphx-glr-signature {
    display: none;
  }

  .admonition > p:last-of-type {
    margin-bottom: 0;
    padding-bottom: rem(18px) !important;
  }
}

.pytorch-article {
  div.sphx-glr-download a {
    background-color: $light_grey;
    background-image: url("../images/arrow-down-blue.svg");
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 15px 15px;
    border-radius: 0;
    border: none;
    display: block;
    text-align: left;
    padding: rem(15px) rem(50px);
    position: relative;
    margin: rem(20px) auto;

    @include animated_border_hover_state;
    @include desktop {
      &:after {
        background-color: $red_orange;
      }
    }

    @include desktop {
      background-position: left 20px center;
    }

    &:hover {
      box-shadow: none;
      text-decoration: none;
      background-image: url("../images/arrow-down-blue.svg");
      background-color: $light_grey;
    }

    span.pre {
      background-color: transparent;
      font-size: rem(18px);
      padding: 0;
      color: $not_quite_black;
    }

    code, kbd, pre, samp, span.pre {
      font-family: FreightSans, Helvetica Neue, Helvetica, Arial, sans-serif;
    }
  }
}

.pytorch-article p.sphx-glr-script-out {
  margin-bottom: rem(18px);
}

.pytorch-article div.sphx-glr-script-out {
  margin-bottom: rem(40px);
  .highlight {
    margin-left: 0;
    margin-top: 0;
  }

  .highlight pre {
    background-color: #fdede9;
    padding: rem(25px);
    color: #837b79;
  }

  + p {
    margin-top: unset;
  }
}

article.pytorch-article {
  .wy-table-responsive {
    table {
      border: none;
      border-color: $white !important;
      table-layout: fixed;
      thead {
        tr {
          border-bottom: 2px solid $quick_start_grey;
        }
        th {
          line-height: rem(28px);
          padding-left: rem(15px);
          padding-right: rem(15px);
        }
      }
      tbody {
        .row-odd {
          background-color: $light_grey;
        }
        td {
          color: $quick_start_grey;
          white-space: normal;
          padding: rem(15px);
          font-size: rem(16px);
          line-height: rem(22px);
          .pre {
            background: $white;
            color: $red_orange;
            font-size: 87.5%;
          }
          code {
            font-size: 87.5%;
          }
        }
      }
    }
  }
}

a[rel~="prev"], a[rel~="next"] {
  padding: 0.375rem 0 0 0;
}

img.next-page,
img.previous-page {
  width: 8px;
  height: 10px;
  position: relative;
  top: -1px;
}

img.previous-page {
  transform: scaleX(-1);
}

.rst-footer-buttons {
  margin-top: rem(30px);
  margin-bottom: rem(30px);
  .btn:focus,
  .btn.focus {
    box-shadow: none;
  }
}

article.pytorch-article {
  blockquote {
    margin-left: rem(60px);
    color: $quick_start_grey;
  }
}

article.pytorch-article .caption {
  color: $quick_start_grey;
  letter-spacing: 0.25px;
  line-height: rem(34px);
}

article.pytorch-article {
  .math {
    color: $not_quite_black;
    width: auto;
    text-align: center;
    img {
      width: auto;
    }
  }
}

.pytorch-breadcrumbs-wrapper {
  width: 100%;

  @include sphinx-medium-size {
    float: left;
    margin-left: 3%;
    width: $sphinx_article_width;
  }

  @include sphinx-full-size {
    width: 850px;
    margin-left: rem(30px);
  }

  .pytorch-breadcrumbs-aside {
    float: right;

    .fa.fa-github {
      margin-top: 5px;
      display: block;
    }
  }
}

.pytorch-article .container {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

a:link,
a:visited,
a:hover {
  color: $red_orange;
}

::-webkit-input-placeholder {
  color: $red_orange;
}

::-moz-placeholder {
  color: $red_orange;
}

:-ms-input-placeholder {
  color: $red_orange;
}

:-moz-placeholder {
  color: $red_orange;
}

.site-footer {
  @include desktop {
    a:hover {
      color: $red_orange;
    }
  }
}

.docs-tutorials-resources {
  a {
    color: $red_orange;
  }
}

.header-holder {
  position: relative;
  z-index: 201;
}

.header-holder .main-menu {
  ul li {
    &.active {
      &:after {
        color: $red_orange;
      }

      a {
        color: $red_orange;
      }
    }
  }

  ul li a {
    @include full-nav-menu-desktop {
      &:hover {
        color: $red_orange;
      }
    }
  }
}

.mobile-main-menu.open {
  ul li.active a {
    color: $red_orange;
  }
}

.version {
  padding-bottom: rem(16px);
}

.pytorch-call-to-action-links {
  padding-top: 0;
  display: flex;

  @include desktop {
    padding-top: rem(40px);
  }

  @include small-desktop {
    padding-top: 0;
  }

  @media (min-width: 1100px) and (max-width: 1239px) {
    padding-top: rem(40px);
   }

  #tutorial-type {
    display: none;
  }

  .call-to-action-img, .call-to-action-notebook-img {
    height: rem(22px);
    width: rem(22px);
    margin-right: 10px;
  }

  .call-to-action-notebook-img {
    height: rem(16px);
  }

  a {
    padding-right: rem(20px);
    color: $black;
    cursor: pointer;
    &:hover {
      color: $orange;
    }

    .call-to-action-desktop-view {
      display: none;
      @include desktop {
        display: block;
      }
    }

    .call-to-action-mobile-view {
      display: block;
      @include desktop {
        display: none;
      }
    }

    #google-colab-link, #download-notebook-link,
    #github-view-link {
      padding-bottom: rem(10px);
      border-bottom: 1px solid $light_grey;
      padding-right: rem(40px);
      display: flex;
      align-items: center;
      &:hover {
        border-bottom-color: $orange;
        color: $orange;
      }
    }
  }
}

#tutorial-cards-container {

  #tutorial-cards {
    width: 100%;
  }

  .tutorials-nav {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  .tutorials-hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .card.tutorials-card {
    border-radius: 0;
    border-color: $light_grey;
    height: 98px;
    margin-bottom: rem(20px);
    margin-bottom: rem(30px);
    overflow: scroll;
    background-color: $light_grey;
    cursor: pointer;

    @include max-width-desktop {
      height: 200px;
      overflow: inherit;
    }

    @include small-desktop {
      height: 200px;
      overflow: scroll;
    }

    .tutorials-image {
      position: absolute;
      top: 0px;
      right: 0px;
      height: 96px;
      width: 96px;
      opacity: 0.5;
      img {
        height: 100%;
        width: 100%;
      }

      @include desktop {
        height: 100%;
        width: 25%;
      }

      @include small-desktop {
        height: 100%;
        width: 198px;
      }

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
        background: #000000;
        opacity: .075;
      }
    }

    .card-title-container {
      width: 70%;
      @include desktop {
        width: 75%;
      }
      @include small-desktop {
        width: 70%;
      }
      display: inline-flex;
      h4 {
        margin-bottom: 1.125rem;
        margin-top: 0;
        font-size: 1.5rem;
      }
    }

    p.card-summary, p.tags {
      font-size: rem(15px);
      line-height: rem(24px);
      margin-bottom: 0;
      color: $dark_grey;
      font-weight: 400;
      width: 70%;
      @include desktop {
        width: 75%;
      }
      @include small-desktop {
        width: 70%;
      }
    }

    p.tags {
      margin-top: 30px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    h4 {
      color: $slate;
      margin-bottom: rem(18px);
    }

    a {
      height: 100%;

      @include desktop {
        min-height: 190px;
      }

      @include small-desktop {
        min-height: 234px;
      }
    }

    @include animated_border_hover_state;
    &:hover {
      background-color: $white;
      border: 1px solid #e2e2e2;
      border-bottom: none;

      p.card-summary {
        color: $not_quite_black;
      }

      .tutorials-image {
        opacity: unset;
      }
    }
  }

  .tutorial-tags-container {
    width: 75%;

    &.active {
      width: 0;
    }
  }

  .tutorial-filter-menu {
    ul {
      list-style-type: none;
      padding-left: rem(20px);
      li {
        padding-right: rem(20px);
        word-break: break-all;

        a {
        color: #979797;
        &:hover {
          color: $orange;
          }
        }
      }
    }
  }

  .tutorial-filter {
    cursor: pointer;
  }

  .filter-btn {
    color: #979797;
    border: 1px solid #979797;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 5px;
    &:hover {
      border: 1px solid $orange;
      color: $orange;
    }
    &.selected {
      background-color: $orange;
      border: 1px solid $orange;
      color: $white;
    }
  }

  .all-tag-selected {
    background-color: #979797;
    color: $white;
    &:hover {
      border-color: #979797;
      color: $white;
    }
  }

  .pagination {
    .page {
      border: 1px solid #dee2e6;
      padding: 0.5rem 0.75rem;
    }

    .active .page {
      background-color: #dee2e6;
    }
  }
}

article.pytorch-article {
  .tutorials-callout-container {
    padding-bottom: 50px;

    .col-md-6 {
      padding-bottom: 10px;
    }

    .text-container {
      padding: 10px 0px 30px 0px;
      padding-bottom: 10px;

      .body-paragraph {
        color: #666666;
        font-weight: 300;
        font-size: rem(18px);
        line-height: rem(30px);
      }
    }

    .btn.callout-button {
      font-size: rem(18px);
      border-radius: 0;
      border: none;
      background-color: $light_grey;
      color: $quick_start_grey;
      font-weight: 400;
      position: relative;
      letter-spacing: 0.25px;
      @include animated_border_hover_state;
      a {
        color: inherit;
      }
    }
  }
}
